<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>雇主订单</title>
    <header th:replace="header::html"></header>
</head>
<body>
<span>欢迎查看您的订单！！！</span>
<!-- 增加搜索条件 -->
<div class="demoTable">

    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="请输入作品名称">
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="startDate" placeholder="请选择作品发布时间"
                   name="startDate">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="endDate" placeholder="请选择作品截止时间" name="endDate">
        </div>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="checkDetails">查看详情</a>
</script>

</body>
<script>
	layui.use('laydate', function () {
		var laydate = layui.laydate;
		//选中后的回调
		laydate.render({
			elem: '#startDate'
			, done: function (value, date) {
			}
		});

		laydate.render({
			elem: '#endDate'
			, done: function (value, date) {
			}
		});
	});

	layui.use('table', function () {
		var table = layui.table;

		//第一个实例
		table.render({
			elem: '#demo'
			, url: '/api-front/frontneed/workList' //数据接口
			, page: true //开启分页
			, limits: [5]
			, limit: 6
			, cols: [
				[ //表头
					{title:'ID',type:'numbers', align: 'center'}
					, {field: 'wid', title: 'ID', align: 'center', sort: true, width: "5%", style: 'display:none;'}
					, {field: 'wtitle', title: '作品名称', align: 'center'}
					, {field: 'wcontent', title: '作品简介', align: 'center', width: "5%"}
					, {field: 'wmoney', title: '价格', sort: true, align: 'center'}
					, {field: 'wstarttime', title: '发布时间', align: 'center'}
					, {field: 'wendtime', title: '结束时间', align: 'center'}
					, {field: 'wuseraccount', title: '发布者', align: 'center'}
					, {field: 'type', title: '作品类型', align: 'center'}
					, {toolbar: "#bar", title: '操作', align: 'center'}

				]
			]
		});
		$('table.layui-table thead tr th:eq(1)').addClass('layui-hide');//隐藏第一列的表头
		$('.demoTable .layui-btn').on('click', function () {
			if ($("#startDate").val()>$("#endDate").val()) {
				layer.msg("您的日期不正确，请重新输入！",{icon:2});
			}else{
				var type = $(this).data('type');
				if (type == 'reload') {
					//执行重载
					table.reload('demo', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						, where: {
							wtitle: $("#demoReload").val(),
							startDate: $("#startDate").val(),
							endDate: $("#endDate").val()

						}
					});
					$('table.layui-table thead tr th:eq(1)').addClass('layui-hide');//隐藏第一列的表头
				}
			}

		});

	});


</script>
